﻿@model Telecom.Data.LAP_THIETBI

<div id="giando_load" style="margin-left:20px; padding-left:0px"></div>

<div class="footer_submit" style="margin-top: 10px; text-align: center">
    <button type="button" onclick="return close_window_elements('window_view_gian_do_dau_noi');">
        <span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">Đóng giản đồ</span><span class="l-btn-icon icon-remove">&nbsp;</span></span></button>
</div>

<script type="text/javascript">

    
    var m = [10, 80, 10, 80],
    w = (750) - m[1] - m[3],
    h = (300) - m[0] - m[2],
    i = 0,
    root;


var cluster = d3.layout.tree()
    .size([h, w]);

var svg = d3.select("#giando_load").append("svg")
    //.attr("width", w + m[1] + m[3])
    //.attr("height", h + m[0] + m[2])
    .attr("width", 750)
    .attr("height", 300)
    .append("g")
    .attr("transform", "translate(40,0)");

d3.json(_nameSubDomain + "/TThietbi/LoadJsonGianDoOnThietBiDauNoi?id=@Model.ID", function(json) {

  var nodes = cluster.nodes(json[0]);

  var link = svg.selectAll("path.link")
      .data(cluster.links(nodes))
      .enter().append("path")
      .attr("class", "link")
      .attr("style", "cursor:pointer")
      .attr("d", elbow);

    svg.selectAll("path.link").each(function(d, i) {
        console.log(this, d, i);
    });

   

  var node = svg.selectAll("g.node")
      .data(nodes)
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });


  node.append("image")
         .attr("class", function (d) {
             return "node " + d.id;
         })
         .attr("xlink:href", function (d) { return "" + _nameSubDomain + "/Content/fileUpload/" + d.Images + ""; } )
         .attr("width", "50px")
         .attr("x", "-25px")
         .attr("y", "-25px")
         .attr("height", "50px");

  //node.append("circle")
  //    .attr("r", 15)
  //    .on("click", function(d){ makeDialog("Cập nhật site " + d.name,d.id, 350 , subdomain + "/Site/EditSite?SiteId=" + d.id); })
  //    .attr("class", function(d) { return "edit_odf"; })
  //    .attr("data-dialog-url", function(d) { return "/Site/EditSite?SiteId=" + d.id ; })
  //    .attr("data-dialog-title", function(d) { return d.name; })
  //    .attr("data-dialog-id", function(d) { return d.id; })
  //    .style("fill", function (d) { return d.Color; });

  node.append("text")
      .attr("dx", function (d) { return d.children ? 70 : -100; })
      .attr("dy", "2.8em")
      .attr("text-anchor", function (d) { return d.children ? "end" : "start"; })
      .style("fill", function (d) { return d.Color; })
      .text(function (d) { return d.name; });
      

  node.append("text")
    .attr("dx", function (d) { return d.children || d._children ? -240 : 10; })
    .attr("dy", "1.5em")
    .attr("style", "cursor:pointer")
    .attr("text-anchor", function (d) { return d.children ? "end" : "start"; })
    .attr("class", function (d) { return "name_line_path"; })
    //.on("click", function(d, i){ return makeDialog("Cập nhật cáp quang " + d.namepath,d.pathid, 350 , subdomain + "/CapQuang/EditCapQuang?CapId=" + d.pathid); })
    .text(function (d) { return d.PortSo; }); //d.namepath; });

    
});



function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
      + "V" + d.target.x + "H" + d.target.y;
}


</script> 
